<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <title>Modify article</title>
    <link href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/summernote.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
    <![endif]-->
    <script src="<%=request.getContextPath() %>/static/js/jquery.min.js"></script>
    <style type="text/css">
.footer {
  padding-right: 15px;
  padding-left: 15px;
}
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}
@media screen and (min-width: 768px) {
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
}
    </style>
  </head>
  <body>
  
<jsp:include page="navigationHead.jsp" />

    <div class="container">
    
      <h1>Modify Article</h1>
    
      <form id="formModifyArticle">
            <div class="row">
              <label for="inputTitle">Title</label>
              <input type="text" id="inputTitle" class="form-control" placeholder="Input title here" />
            </div>
            <div class="row">
              <span>Content</span>
              <div id="inputContent" class="summernote"></div>
            </div>
            <div class="row">
              <button type="submit" class="btn btn-lg btn-success">Submit</button>
            </div>
      </form>
    
      <footer class="footer">
        <p>&copy; 2016&nbsp;<a href="mailto:jy@stu.cpu.edu.cn">Zannicaro</a></p>
      </footer>
    </div>
    <script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/ie10-viewport-bug-workaround.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/summernote.min.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/summernote-zh-CN.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/jquery.ui.widget.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/jquery.iframe-transport.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/jquery.fileupload.js"></script>
    <script>
    $(document).ready(function() {
        $('.summernote').summernote({
        	height: 200,
        	minHeight: 300,
        	lang: 'zh-CN',
        	placeholder: '',
        	toolbar: [
        	          // [groupName, [list of button]]
        	          ['style', ['bold', 'italic', 'underline', 'clear']],
        	          ['font', ['strikethrough', 'superscript', 'subscript']],
        	          ['color', ['color']],
        	          ['para', ['ul', 'ol', 'paragraph']],
        	          ['insertT', ['table']],
        	          ['insert', ['link', 'hr', 'picture']],
        	          ['mics', ['undo', 'redo']]
        	        ]
        });
        
    	$.ajax({
    		"type" : "POST",
    		"url" : "../get/${article.id }",
    		"contentType" : "application/json",
    		"data" : JSON.stringify({ }),
    		"dataType" : "json",
    		"success" : function(data) {
    			if (data.code == 0) {
    				var article = data.obj;
    				$("#inputTitle").val(article.title);
    				$('.summernote').summernote("code", article.content);
    			} else {
    				location.href = "list";
    			}
    		},
    		"error" : function() {
    			alert("error!");
    		},
    		"complete" : function() {
    		}
    	});
        
        $("#formModifyArticle").submit(function() {
        	var postData = {
            		title : $("#inputTitle").val(),
            		content : $("#inputContent").summernote("code")
            		};
        	$.ajax({
        		"type" : "POST",
        		"url" : "../modify/${article.id }",
        		"contentType" : "application/json",
        		"data" : JSON.stringify(postData),
        		"dataType" : "json",
        		"success" : function(data) {
        			if (data.code == 0) {
        				location.href = "../show/" + data.obj;
        			} else {
        				alert("Error:" + data.msg);
        			}
        		},
        		"error" : function() {
        			alert("error!");
        		},
        		"complete" : function() {
        		}
        	});
        	return false;
        });
        
        
    });
    </script>
  </body>
</html>